<!--
  * @Description codemirror 6 编辑器
  * @Author 莫发达
  * @create 2024-09-20 15:55 周五
-->
<script setup lang="ts">
import { ref } from 'vue'
import Codemirror from '@shared/base/codemirror-editor/index.vue' // codemirror 6 编辑器
import { linter } from '@codemirror/lint'
import { sql, MySQL } from '@codemirror/lang-sql' // sql 语言
import { json, jsonParseLinter } from '@codemirror/lang-json' // json 语言

const jsonValue = ref<string>('{ "Hello":"World!" }')

const sqlValue = ref<string>('SELECT * FROM table_name')

/**
 * 打印值
 * @param value
 */
function consoleValue(value: string) {
  console.log(value)
}
</script>

<template>
  <main class="page flex min-h-page flex-col gap-y-4">
    <header class="rounded-md bg-white p-4">
      <h2>codemirror 6 编辑器</h2>
    </header>

    <section class="flex h-[300px] flex-col rounded-md bg-white p-4">
      <header class="flex justify-between">
        <h2>JSON 编辑器</h2>

        <el-button @click="consoleValue(jsonValue)">
          打印
        </el-button>
      </header>

      <Codemirror
        v-model="jsonValue"
        class="flex-1"
        :extensions="[linter(jsonParseLinter()), json()]"
      />
    </section>

    <section class="flex h-[300px] flex-col rounded-md bg-white p-4">
      <header class="flex justify-between">
        <h2>SQL 编辑器</h2>

        <el-button @click="consoleValue(sqlValue)">
          打印
        </el-button>
      </header>

      <Codemirror
        v-model="sqlValue"
        class="flex-1"
        :extensions="[sql({ dialect: MySQL })]"
      />
    </section>
  </main>
</template>

<style scoped lang="less"></style>
